<template>
	<view>
		<view style="display: flex;">
			<view class="clock">
				<u-icon name="clock" size="36"></u-icon>
			</view>
			<view style="margin-top: 10px;margin-left: 6px;">
				<u-count-down :timestamp="timestamp" @change="remind" :color="showColor"></u-count-down>
			</view>
			<view style="margin-top: 7px;position: absolute;right: 18px;">
				<button size="mini" type="primary" @click="submitTestPaper">交卷</button>
			</view>
		</view>

		<u-modal :mask-close-able="true" v-model="showM" @confirm="confirm" ref="uModal" show-cancel-button
			:content="content"></u-modal>

		<view style="height: 1px;background-color: #E5E5E5;margin-top: 8px;"></view>

		<view>
			<u-mask :show="modalCard" @click="modalCard = false" :custom-style="customStyle">
				<view>
					<scroll-view :scroll-y=true :style="{'height':swiperHeight}">
						<view>
							<view style="margin: 16px 16px;color: #2979FF;">
								<view>答题卡（点击题目更改答案）</view>
							</view>
						</view>
						<view class="card-options">
							<view v-for="(subject,index) in subjectList" :key="index" style="display: inline-block;">
								<view class="options-shape" v-if="subject.userAnswer.length===0"
									@click="appointedSubject(index)"
									style="background-color: #E5E5E5;display: inline-block;">
									<view class="option-poistion" style="display: inline-block;"
										v-if="(index+1).length==1">
										{{ index + 1 }}
									</view>
									<view class="option-poistion2" style="display: inline-block;" v-else>
										{{ index + 1 }}
									</view>
								</view>
								<view class="options-shape" v-else @click="appointedSubject(index)"
									style="background-color: #09BB07;display: inline-block;">
									<view class="option-poistion" style="display: inline-block;"
										v-if="(index+1).length==1">
										{{ index + 1 }}
									</view>
									<view class="option-poistion2" style="display: inline-block;" v-else>
										{{ index + 1 }}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</u-mask>
		</view>
		<form>
			<swiper :current="subjectIndex" @change="swiperChange" :style="{'height':swiperHeight}">
				<swiper-item v-for="(subject,index) in subjectList" :key="subject.id">
					<view v-if="index-subjectIndex>=-1&&index-subjectIndex<=1">
						<view>
							<view class="topic">
								{{ index + 1 }}
								<text v-if="currentType===3" style="color: #2979FF;">(单选题)</text>
								<text v-else-if="currentType===1" style="color: #2979FF;">(多选题)</text>
								<text v-else-if="currentType===2" style="color: #2979FF;">(判断题)</text>
								{{ subject.title }}({{ subject.score }}分)
							</view>
						</view>
						<view>
							<radio-group class="block" @change="radioboxChange"
								v-if="subject.type===2||subject.type===3">
								<view class="answer" v-for="option in subject.optionList" :key="option.id">
									<view>
										<radio :value="option.id"
											:checked="subject.userAnswer.indexOf(option.id)>-1?true:false"></radio>
									</view>
									<view class="answer-right">{{ option.id }}.{{ option.content }}</view>
								</view>
							</radio-group>
							<checkbox-group @change="checkboxChange" v-else-if="subject.type===1">
								<view class="answer" v-for="option in subject.optionList" :key="option.id">
									<view>
										<checkbox :value="option.id"
											:class="subject.userAnswer.indexOf(option.id) > -1?'checked':''"
											:checked="subject.userAnswer.indexOf(option.id) > -1?true:false"></checkbox>
									</view>
									<view class="answer-right">{{ option.id }}.{{ option.content }}</view>
								</view>
							</checkbox-group>
						</view>

						<view v-show="subject.showAnswer" class="margin-top solid-top">
							<view class="cu-bar">
								<view class="action  text-grey">
									<text>正确答案：</text>
									<text class="solid-bottom  padding-left text-green">{{ subject.answer }}</text>
								</view>
							</view>
							<view class="cu-bar cu-bar-title">
								<view class="action  text-grey">
									<text>解析：</text>
								</view>
							</view>
							<view class="text-content padding  text-grey">
								{{ subject.explain }}
							</view>
						</view>

					</view>
				</swiper-item>
			</swiper>
			<view style="height: 1px;background-color: #E5E5E5;margin-top: 8px;box-shadow: 10px 1px 1px #E5E5E5;">
			</view>
			<view style="display: flex;">
				<view class="last-question" @click="returnLastQuestion">上一题</view>
				<view style="margin-top: 12px;position: absolute;right: 50%;transform: translateX(50%);">
					<button size="mini" type="primary" @click="showCardModal">答题卡</button>
				</view>
				<view class="next-question" @click="goNextQuestion">下一题</view>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		getinfoListBypId,
		submitPaper
	} from '@/api/jz/paper/api.js';

	export default {
		data() {
			return {
				currentTimestamp: null,
				scrollMark: 0,
				content: '还有未完成的题目，确定要交卷吗?',
				showM: false,
				title: '',
				currentType: 0,
				swiperHeight: '560px',
				subjectIndex: 0, //跳转索引
				autoRadioNext: true, //判断题、单项题，自动移下一题
				timestamp: 600, //答题倒计时
				showColor: '#000000',
				wh: 0,
				modalCard: false,
				customStyle: {
					"background-color": '#FFFFFF',
				},
				subjectList: [],
				detailObj: null,
			}
		},
		onLoad(option) {

			this.detailObj = JSON.parse(decodeURIComponent(option.obj))
			this.timestamp = Number(this.detailObj.duration) * 60;
			var that = this
			// that.title = e.title;
			// uni.setNavigationBarTitle({
			// 	title: that.title
			// });
			// that.currentType = that.subjectList[0].type;
			// uni.getSystemInfo({
			//   success(res) {
			//     that.wh = res.screenHeight;
			//   }
			// })
			getinfoListBypId(this.detailObj.id).then((res) => {
				if (res.code == 200) {
					that.subjectList = res.data;
					that.currentType = that.subjectList[0].type;
				}
			})

		},
		mounted() {


		},
		methods: {
			swiperChange(e) { //滑动事件
				let index = e.target.current;
				if (index != undefined) {
					this.subjectIndex = index;
					this.currentType = this.subjectList[index].type;
				}
			},
			radioboxChange(e) { //单选选中
				var items = this.subjectList[this.subjectIndex].optionList;
				var values = e.detail.value;
				this.subjectList[this.subjectIndex].userAnswer = values;
				if (this.autoRadioNext && this.subjectIndex < this.subjectList.length - 1) {
					this.subjectIndex += 1;
				};
			},
			checkboxChange(e) { //复选选中
				var items = this.subjectList[this.subjectIndex].optionList;
				var values = e.detail.value;
				this.subjectList[this.subjectIndex].userAnswer = "";
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].id == values[j]) {
							this.subjectList[this.subjectIndex].userAnswer += items[i].id;
							break
						}
					}
				}
			},
			remind(currentTimestamp) {
				this.currentTimestamp = currentTimestamp
				if (currentTimestamp == 180) {
					this.showColor = '#F64E4E';
					uni.showToast({
						title: '即将超时，请及时提交...',
						icon: 'none'
					});
				}
				if (currentTimestamp == 1) {
					uni.showLoading({
						title: '提交中...'
					})
					this.submitPaper()
				}
			},
			returnLastQuestion() {
				if (this.subjectIndex == 0) {
					uni.showToast({
						title: '已经是第一题',
						icon: 'none'
					})
				} else {
					this.subjectIndex -= 1;
				}
			},
			goNextQuestion() {
				if (this.subjectIndex == this.subjectList.length - 1) {
					uni.showToast({
						title: '已经是最后一题',
						icon: 'none'
					})
				} else {
					this.subjectIndex += 1;
				}
			},
			showCardModal() {
				this.modalCard = true;
			},
			appointedSubject(index) {
				this.subjectIndex = index;
			},
			submitTestPaper() {
				let _arr = []
				this.scrollMark = 0
				this.subjectList.forEach((item) => { //判单是否有没有做的选择题
					_arr.push(item.userAnswer)
					if (item.answer == item.userAnswer) {
						this.scrollMark += item.score
					}
				})
				if (_arr.some(val => val === '')) { //true
					this.showM = true;
				} else { //false
					this.submitPaper()
				}
			},

			submitPaper() {
				const data = {
					timeConsuming: this.timestamp - this.currentTimestamp,
					score: this.scrollMark,
					paperId: this.detailObj.id
				}
				submitPaper(data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '交卷成功',
							icon: 'success'
						})

						uni.redirectTo({
							url: '/pages/work/myHomework/examDetails?stuResult=' + encodeURIComponent(JSON
								.stringify(res.data))
						})
					}
				}).catch((err) => {
					console.error(err);
				});
			},

			confirm() { //确定提交试卷吗
				this.showM = false;
				this.submitPaper()
			}

		}
	}
</script>

<style lang="less">
	.topic {
		margin-top: 13px;
		margin-left: 16px;
		font-size: 16px;
	}

	.answer {
		display: flex;
		margin-top: 26px;
		margin-left: 16px;

		.answer-right {
			font-size: 14px;
			margin-top: 2px;
			margin-left: 6px;
		}
	}

	.clock {
		margin-top: 10px;
		margin-left: 6px;
	}

	.last-question {
		margin-top: 13px;
		margin-left: 16px;
		font-size: 15px;
		color: #2979ff;
	}

	.next-question {
		margin-top: 13px;
		position: absolute;
		right: 16px;
		font-size: 15px;
		color: #2979ff;
	}

	.card-options {
		.options-shape {
			width: 36px;
			height: 36px;
			border-radius: 18px;
			position: relative;
			margin-left: 16px;

			.option-poistion {
				position: absolute;
				top: 26%;
				left: 40%;
				transform: translate(50% 50%);
			}

			.option-poistion2 {
				position: absolute;
				top: 26%;
				left: 30%;
				transform: translate(50% 50%);
			}
		}
	}

	.uni-list-cell {
		justify-content: flex-start;
	}
</style>